<template>
    <div class="left">
        <div class="title">
            <p>{{ leftTitle }}</p>
        </div>
        <div class="nav">
            <section v-for="(items, i) in navTopList" :key="i">
                <a href="JavaScript:;">{{ items.title }}</a>
                <div
                    v-for="(item, index) in navList"
                    :key="index"
                    :class="
                        curIndex == item.id && topIndex == i ? 'nav-on' : ''
                    "
                >
                    <a href="JavaScript:;" @click="onLeftTab(item.id, i)">
                        <p>{{ item.name }}</p>
                        <i class="iconfont iconjiantou"></i>
                    </a>
                </div>
            </section>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        leftTitle: {
            type: String,
        },
        navList: {
            type: Array,
        },
        navTopList: {
            type: Array,
        },
        curIndex: {
            type: Number,
            default: 0,
        },
        topIndex: {
            type: Number,
            default: 0,
        },
        path: {
            type: String,
        },
    },
    data() {
        return {};
    },
    created() {
        console.log(this.navTopList);
    },
    methods: {
        onLeftTab(index, i) {
            const parm = {
                index: index,
                topIndex: i,
            };
            this.$emit("onLeftTab", parm);
        },
    },
    watch: {
        // $route: {
        //     handler: function(route) {
        //         if (route.query.type) {
        //             this.$emit("onLeftTab", parseInt(route.query.type));
        //         }
        //     },
        //     immediate: true,
        // },
    },
};
</script>

<style scoped>
.title {
    height: 45px;
    line-height: 45px;
    width: 280px;
    padding: 0 25px;
    box-sizing: border-box;
    background-color: #371f75;
    margin: 20px 0;
    color: #fff;
}
.title p {
    font-size: 18px;
}
.nav section > a {
    display: block;
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
    color: #000;
    margin: 10px 0;
    border-bottom: 2px solid #371f75;
    font-size: 16px;
}
.nav div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    width: 280px;
    background-color: #f2f2f2;
    margin-bottom: 10px;

    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}
.nav div a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    padding: 0 25px;
    font-size: 14px;
}
.nav div i {
    transform: rotate(180deg);
    font-size: 14px;
}
.nav .nav-on {
    background-color: rgb(192, 38, 54);
    color: #fff;
}
.nav .nav-on i {
    color: #fff;
}
</style>
